<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function () {
            // 获取所有标签的对象
            var oNum1 = document.getElementById("num1"); //第一个参数
            var oOpt = document.getElementById("operate");//运算符
            var oNum2 = document.getElementById("num2");//第二个参数
            var oCalc = document.getElementById("calc");//计算的等号
            var oRes = document.getElementById("result");//结果

            // 设置等号的点击事件监听
            oCalc.onclick = function () {
                // 获取的输入的值 不是数字 是字符串   需要转换
                var value1 = parseFloat(oNum1.value);
                var value2 = parseFloat(oNum2.value);

                // 获取运算符的值
                var optValue = oOpt.value;

                // 定义一个变量存放运算结果
                var result = 0;

                if (optValue == 0) {
                    // 加
                    result = value1 + value2;
                } else if (optValue == 1) {
                    // 减
                    result = value1 - value2;
                } else if (optValue == 2) {
                    // 乘
                    result = value1 * value2;
                } else if (optValue == 3) {
                    // 除
                    result = value1 / value2;
                }
                // alert(result);

                oRes.value = result;
            }

        }
    </script>
</head>

<body>

    <input type="text" id="num1">
    <select name="" id="operate">
        <option value="0">+</option>
        <option value="1">-</option>
        <option value="2">×</option>
        <option value="3">÷</option>
    </select>

    <input type="text" id="num2">
    <input type="button" value="=" id="calc">
    <input type="text" id="result">


</body>

</html>